<script setup lang='ts'>
 import axios, { type AxiosResponse }  from 'axios'
 import { onMounted, ref } from 'vue'
 type BannerList = {
        imgUrl: string
    }[]
 interface Result {
    code: string 
    msg: string
    result: BannerList
 }
 const list = ref<BannerList>([])

 const person = ref<{
    name: string 
    age: number
 }>({
    name: '张三',
    age: 20
 })
 // 获取轮播图数据
 const getBanner = async () => {
  const res = await axios.get<null, AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
   list.value = res.data.result
 }
// 挂载周期
 onMounted(() => {
    getBanner()
 })


       
</script>
       
<template>
   <div class="container">
    <!-- 循环生成谁 就在谁的上面写v-for -->
     <img :key="item.imgUrl" :src="item.imgUrl" alt="" v-for="(item, index) in list" >
   </div>
   <p>
      <ul>
        <!-- v-for遍历对象 -->
        <li v-for="( value, key) in person" :key="key">{{ value }}-{{ key }}</li>
      </ul>
   </p>
   <p>
    <ul>
        <!-- 遍历数字 -->
        <li v-for="item in 100">{{ item }}</li>
    </ul>
   </p>
</template>
       
<style scoped>
     .container {
        width: 100%;
        height: 200px;
     }  
     .container img {
        width: 300px;
        height: 100%;
        margin: 10px 20px;
     }
</style>